<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<link rel="stylesheet" href="../resources/css/report-form.css">
<body>
        <i class="layui-icon icon" id="topIcon">&#xe62c;</i>
        <div class="table">
            <table class="layui-table" lay-skin="line row" id="reportTable" lay-filter="tableListen">
            </table>
        </div>
        <div class="chart">
            <div id="chartFrame">
                <ul>
                    <li><div id="echart1"></div></li>
                    <li><div id="echart2"></div></li>
                </ul>
            </div>
        </div>
</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script src="../lib/echart/echarts.js"></script>
<script>
    //表格窗口设置
	var Height=window.innerHeight*0.9;
    var tableWidth=window.innerWidth*0.245;
    var iconSize=window.innerHeight*0.05;
    var iconSize2=window.innerHeight*0.02;
    $('.icon').css({'font-size':iconSize});
    $('.icon2').css({'font-size':iconSize2});
    
    //图表窗口设置
    var echartsWidth = window.innerWidth*0.5+'px';
    var echartHeight = window.innerHeight*0.6+'px';
    var echartHeight2 = window.innerHeight*0.6+'px';
    var chartWidth = window.innerWidth*0.9+'px';
    var chartHeight = window.innerHeight*0.9+'px';
    $('#chartFrame').css({'height':chartHeight});
    $('#chartFrame').css({'weight':chartWidth});
    $('#echart1').css({'width':echartsWidth,'height':echartHeight});
    $('#echart2').css({'width':echartsWidth,'height':echartHeight2});
    $(window).resize(function() {
        var echartsWidth = window.innerWidth*0.5+'px';
        var echartHeight1 = window.innerHeight*0.95+'px';
        var echartHeight2 = window.innerHeight+'px';
        var chartWidth = window.innerWidth+'px';
        var chartHeight = window.innerHeight+'px';
        $('#chartFrame').css({'height':chartHeight});
        $('#chartFrame').css({'weight':chartWidth});
        $('#echarts1').css({'width':echartsWidth,'height':echartHeight1});
        $('#echarts2').css({'width':echartsWidth,'height':echartHeight2});
    });

    //图表数据
    var testsize=5;
    var cureName=[]; //治疗项目名称
    var cureCost=[]; //治疗费用收入
    var centralCost=[]; //本院支出
    var branchCost=[];  //分院支出
    var centeralIncome=[];  //总利润
    var testData; //报表数据

    //图表对象
    var barChart=echarts.init(document.getElementById("echart1")); //左边柱状图
    var pieChart=echarts.init(document.getElementById("echart2")); //右边饼图
    var barOption; //左边柱状图 属性设置
    var pieOption; //右边饼图 属性设置
    //表格初始化
    layui.use(["table","layer"],function () {
       var $=layui.jquery;
       var table=layui.table;
       var layer=layui.layer;
       iconEvent();//窗口转换图标事件
       initChartData();//初始化图表数据
       
       //表格监听事件
       table.on('tool(tableListen)',function(obj){
            var trdom = obj.tr;  //获取当前点击对象的容器DOM对象
            //alert(obj.data.id); //获取当前点击行的id值
            //console.log(obj.data);
           	if(obj.event==='price'){
           		if(obj.data.projectId == 0) {
           			//{"clinicId":"1","clinicName":"门诊一","startTime":"2017-11-01","endTime":"2017-12-01"}
           			//进入治疗项目门诊报表
           			var param = JSON.parse(localStorage.getItem("clinicFundReport"));
           			localStorage.setItem("clinicReport", JSON.stringify(param));
           			layer.open({
                        type:2,
                        title:'治疗费用',
                        scrollbar:true,
                        area:['80%','90%'],
                        content:'../views/clinicReport.html'
                     });
           		}else {
           			localStorage.setItem("rowInfo",JSON.stringify(obj.data));
           			layer.open({
                        type:2,
                        title: obj.data.projectName,
                        scrollbar:true,
                        area:['80%','90%'],
                        content:'../views/clinicFundDetailReport.html'
                     });
           		}
            }
        });
        //表格数据录入
       var param = JSON.parse(localStorage.getItem("clinicFundReport"));
       table.render({
            id:'idText'
            ,elem: '#reportTable' //指定原始表格元素选择器（推荐id选择器)
            ,page:true
            ,limit:10
            ,center:true
            ,height:Height
            ,cols: [[
                     {field:'clinicName',width:tableWidth,title:'门诊',align:'center'},
                     {field:'projectName',width:tableWidth,title:'项目',align:'center'},
                     {field:'type',width:tableWidth,title:'类型',sort:true,align:'center'},
                     {field:'price',width:tableWidth,title:'总费用',align:'center',event:'price',style:'cursor:pointer;color:#01AAED'},
                 ]],
           url : "../reportController/getClinicFundReport",
           method : "post",
           where : param,
           response : {
               statusName : "code", //数据状态的字段名称
               statusCode : 200, //成功的状态码
               countName: 'total', //数据总数的字段名称
               msgName  : "msg", //状态信息的字段名称
               dataName : "result" //数据列表的字段名称 
           }
        });
    });
	
  	//窗口转换图标事件
    function iconEvent(){
        $('.icon').mouseenter(function(){
            $(this).addClass('iconColor');
        });
        $('.icon').mouseleave(function(){
            $(this).removeClass('iconColor');
        });
        
        var iconNum=0;
        $('.icon').click(function(){
            if(iconNum%2==0){
                $('.table').hide();
                $('.chart').show();
                $('.icon').html("&#xe62d;");
                barChart.clear();
                pieChart.clear();
                barChart.setOption(barOption);
                pieChart.setOption(pieOption);
            }else{
                $('.table').show();
                $('.chart').hide();
                $('.icon').html("&#xe62c;");
            }
            iconNum++;
        });
    }

    //转换视图图标监听事件
    $(function() {
        $('.icon').mouseenter(function(){
      		 $(this).addClass('iconColor');
    	 });
	    $('.icon').mouseleave(function(){
	       $(this).removeClass('iconColor');
	    });
        $('.icon2').mouseenter(function(){
            $(this).addClass('iconColor');
        });
        $('.icon2').mouseleave(function(){
            $(this).removeClass('iconColor');
        });
    });
	
    function initChartData() {
    	var param = JSON.parse(localStorage.getItem("clinicFundReport"));
        $.ajax({
            data : param,
            type : "POST",
            url : "../reportController/getClinicFundReport",
            success : function(response) {
                //初始化报表数据
                var data = response.result;
                console.log("clinicFundReport.html/data");
                console.log(data);
                //获取图表数据
                var income = 0.0;
                var cost = 0.0;
                for(var i = 0;i < data.length;i++) {
                	var rowInfo = data[i];
                	if(rowInfo.type == "收入") {
                		income = income + rowInfo.price;
                	}
                	if(rowInfo.type == "支出") {
                		cost = cost + rowInfo.price;
                	}
                }
              	//登录用户所属门诊
                var clinicName = JSON.parse(localStorage.getItem("loginUser")).clinicName;
                barOption = {
               		title:{
        	            text: clinicName,
        	            left:'5%',
        	            top:'2%'
        	        },
        	        grid: {top:'15%',left: '10%',right: '4%',bottom:'10%',containLabel: true },
        	        tooltip:{
        	            trigger:'axis',
        	            axisPointer:{
        	                type:'shadow'
        	            }
        	        },
        	        legend:{
        	            data:['本院收入','本院支出'],
        	            top:'92%',
        	            left:'10%'
        	        },
        	        xAxis:{
        	        	type:'category',
        	            data:[]
        	        },
        	        yAxis:{
        	       		type:'value'
        	        },
        	        series:[
        	            {
        	                name:'本院收入',
        	                type:'bar',
        	                label:{
        	                    normal:{
        	                        show:true,
        	                        position:'inside'
        	                    }
        	                },
        	                data:[income]
        	            },
        	            {
        	                name:'本院支出',
        	                type:'bar',
        	                label:{
        	                    normal:{
        	                        show:true,
        	                        position:'inside'
        	                    }
        	                },
        	                data:[cost]
        	            },
        	        ]
        	    };
             	//设置饼图图属性
        	    pieOption = {
        	        title:{text:'费用比例图',left:'45%'},
        	        legend: {
        	            top:'90%',
        	            left:'38%',
        	            data:['收入','支出']
        	        },
        	        tooltip: {
        	            trigger:'item',
        	            axisPointer:{
        	                type:'shadow'
        	            }
        	        },
        	        series:[
        	            {
        	                name: '费用类型',
        	                type: 'pie',
        	                radius: '50%',
        	                itemStyle:{
        	                    normal:{
        	                        label:{
        	                            show:true,
        	                            position:'outside',
        	                            formatter: '{b} : {d}%',
        	                        },
        	                    }
        	                },
        	                selectedOffset:'10',
        	                center: ['50%', '45%'],
        	                data:[
        	                   {value : income,name:"收入"},
        	                   {value : cost,name:"支出"},
        	                ]
        	            }
        	        ]
        	    };
            }
        });
    }
   
</script>
</html>